<template>
  <div>
    <div class="address-box" v-for="(item, index) in addressinfo" :key="index">
      <div class="address-header">
        <span>{{item.recename}}</span>
        <div class="address-action">
          <span @click="edit(item.id)">
            <Icon type="edit"></Icon>修改
          </span>
          <span @click="del(item.id)">
            <Icon type="delete"></Icon>删除
          </span>
        </div>
      </div>
      <div class="address-content">
        <p>
          <span class="address-content-title">收 货 人 :</span>
          {{item.recename}}
        </p>
        <!-- <p><span class="address-content-title">收货地区:</span> {{item.province}} {{item.city}} {{item.area}}</p> -->
        <p>
          <span class="address-content-title">收货地址:</span>
          {{item.address}}
        </p>
        <p>
          <span class="address-content-title">邮政编码:</span>
          {{item.mobile}}
        </p>
        <p>
          <span class="address-content-title">用户id:</span>
          {{item.userid}}
        </p>
      </div>

      <!-- 修改地址的对话框 -->
      <Modal v-model="editDialog" width="830">
        <p slot="header">
          <Icon type="md-edit"></Icon>
          <span>修改地址</span>
        </p>
        <div>
          <Form :model="editlist" label-position="left" :label-width="100">
            <FormItem label="收件人">
              <i-input v-model="editlist.recename" size="large"></i-input>
            </FormItem>
            <FormItem label="收货地址">
              <i-input v-model="editlist.address" size="large"></i-input>
            </FormItem>
            <FormItem label="联系电话">
              <i-input v-model="editlist.mobile" size="large"></i-input>
            </FormItem>
          </Form>
        </div>
        <div slot="footer">
          <Button type="primary" size="large" long @click="confirmEdit(editlist.id)">修改</Button>
        <!-- {{this.$store.state.userid}} -->
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import New from "@/new.js";
export default {
  name: "MyAddress",
  data() {
    return {
      userid: "",
      addressinfo: [],
      queryInfo: {
        query: window.sessionStorage.userid
      },
      editDialog: false,
      editlist: {
        recename: "",
        mobile: "",
        address: "",
        userid: ""
      }
    };
  },
  created() {
    this.getReceviceAddress();
  },
  computed: {},
  methods: {
    async getReceviceAddress() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/shopmall/address",
        {
          params: this.queryInfo
        }
      );
      this.addressinfo = res.data;
      console.log(res.data);
    },
    async edit(id) {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/shopmall/address/detail/" + id
      );
      this.editlist = res.data;
      console.log(res.data);
      this.editDialog = true;
      console.log(id);
    },
    async confirmEdit(id) {
      //  console.log(id)
      const { data: res } = await this.$axios.put(
        "http://localhost:8080/api/shopmall/address/edit/" + id,
        {
          params: this.editlist
        }
      );
      if (res.code !== 200) return this.$message.error("修改失败");
      this.$message.success("修改成功");
      this.getReceviceAddress();
      this.editDialog = false;
    },
    // 删除收货地址
    del(id) {
      console.log(id);
      this.$Modal.confirm({
        title: "信息提醒",
        content: "你确定删除这个收货地址",
        onOk: () => {
          this.$axios.delete(
            "http://localhost:8080/api/shopmall/address/delete/" + id
          );
          this.$Message.success("删除成功");
          this.getReceviceAddress();
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        }
      });
    }
  },
  components: {}
};
</script>

<style scoped>
.address-box {
  padding: 15px;
  margin: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ccc;
}
.address-header {
  height: 35px;
  display: flex;
  justify-content: space-between;
  color: #232323;
  font-size: 18px;
}
.address-content {
  font-size: 14px;
}
.address-content-title {
  color: #999;
}
.address-action span {
  margin-left: 15px;
  font-size: 14px;
  color: #2d8cf0;
  cursor: pointer;
}
</style>
